<template>
  <div class="micro-title-text">
    <!-- 预览组件 -->
    <div class="previewStyle dis dis_ju_spb al_item" :style="{height: formData.height/2 + 'px',background: formData.bg_color,paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
      <div class="dis al_item flex_1" :style="{justifyContent: formData.align}">
        <div class="titleText" :class="[formData.specialFlag? 'font_w':'']" :style="{fontSize: formData.title_size/2 + 'px',color: formData.titleColor}">{{ formData.title }}</div>
        <div class="descText" :style="{color: formData.descColor}">{{ formData.desc }}</div>
      </div>
      <div>
        <span v-show="formData.rightType == 1&&formData.tabSelect == 1" class="el-icon-arrow-right iconSize" :style="{color: formData.rightIconColor}" />
        <span v-show="formData.rightType == 2" :style="{color: formData.rightTextColor}">查看更多</span>
      </div>
    </div>
    <div v-show="isShowEdit" class="design-editor-item">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">标题文本</div>
          <div class="tabRadioWrap">
            <el-radio-group v-model="formData.tabSelect" style="width: 100%;" @change="changeEnter">
              <el-radio-button label="0">简洁模式</el-radio-button>
              <el-radio-button label="1">入口模式</el-radio-button>
            </el-radio-group>
          </div>
          <el-tabs v-model="tabActive" tab-position="top" style="marginTop: 10px;">
            <el-tab-pane label="内容设置" name="0">
              <div class="contentSetting">
                <el-form :model="formData" label-width="100px">
                  <el-form-item label="标题内容" prop="title" :rules="[{ required: true, message: '  标题不能为空'}]">
                    <el-input v-model="formData.title" />
                  </el-form-item>
                  <el-form-item label="描述内容" prop="desc">
                    <el-input v-model="formData.desc" type="textarea" />
                  </el-form-item>
                  <el-form-item v-if="formData.tabSelect == '1'" label="跳转链接">
                    <el-button v-if="formData.linkUrl == ''" type="primary" size="mini" @click="choosePage()">选择链接</el-button>
                    <div v-if="formData.linkUrl != ''">
                      <el-tag>{{ formData.microType }}</el-tag> <span style="margin: 0 5px">{{ formData.microTitle }}</span>
                      <el-button type="text" size="mini" @click="choosePage()">修改</el-button>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>字号大小</span>
                      <span class="text_mar">{{ formData.title_size }}px</span>
                    </div>
                    <el-radio-group v-model="formData.title_size" size="small">
                      <el-radio-button label="28">小</el-radio-button>
                      <el-radio-button label="32">中</el-radio-button>
                      <el-radio-button label="36">大</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>对齐方式</div>
                    <el-radio-group v-model="formData.align" size="small">
                      <el-radio-button label="flex-start">居左</el-radio-button>
                      <el-radio-button label="center">居中</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div v-show="formData.tabSelect == '1'" class="dis dis_ju_spb al_item w100e item_mar">
                    <div>右侧入口</div>
                    <el-radio-group v-model="formData.rightType" size="small">
                      <el-radio-button label="1">图标</el-radio-button>
                      <el-radio-button label="2">文字</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>标题颜色</span>
                      <span class="text_mar">{{ formData.titleColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(1)">重置</div>
                      <el-color-picker
                        v-model="formData.titleColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>描述颜色</span>
                      <span class="text_mar">{{ formData.descColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(2)">重置</div>
                      <el-color-picker
                        v-model="formData.descColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>右侧文字颜色</span>
                      <span class="text_mar">{{ formData.rightTextColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(3)">重置</div>
                      <el-color-picker
                        v-model="formData.rightTextColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div v-show="formData.tabSelect == '1'" class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>右侧图标颜色</span>
                      <span class="text_mar">{{ formData.rightIconColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(4)">重置</div>
                      <el-color-picker
                        v-model="formData.rightIconColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>背景颜色</span>
                      <span class="text_mar">{{ formData.bg_color }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(5)">重置</div>
                      <el-color-picker
                        v-model="formData.bg_color"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>特殊样式</div>
                    <div>
                      <el-checkbox v-model="formData.specialFlag" label="粗体" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">
                  组件样式
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="30">中</el-radio-button>
                    <el-radio-button label="40">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="30">中</el-radio-button>
                    <el-radio-button label="40">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="progressWrap item_mar">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>框体高度</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.height" />
                      </div>
                      <div class="inpWrap">{{ formData.height }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>
    <!--选择微页面-->
    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="页面选择"
      :visible.sync="dialogChoosePages"
      width="55%"
    >

      <choose-feature
        :is-get-choose-data="isGetChooseFeature"
        @chooseChooseFeaturesFun="chooseChooseFeaturesFun"
      />
      <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
        <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
        <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
